<script lang="ts" setup>
import type {MenuRecordRaw} from '@/typings/core';
import type {MenuProps} from '@/components/common/menu';

import {useRoute} from 'vue-router';

import {Menu} from '@/components/common/menu';

import {useNavigation} from './use-navigation';

interface Props extends MenuProps {
  collapse?: boolean;
  menus: MenuRecordRaw[];
}

withDefaults(defineProps<Props>(), {
  accordion: true,
  menus: () => [],
});

const route = useRoute();
const {navigation} = useNavigation();

async function handleSelect(key: string) {
  await navigation(key);
}
</script>

<template>
  <Menu
      :accordion="accordion"
      :collapse="collapse"
      :default-active="route.meta?.activePath || route.path"
      :menus="menus"
      :rounded="rounded"
      :theme="theme"
      mode="vertical"
      @select="handleSelect"
  />
</template>
